<template>
  <div v-loading="loadingTable" class="tableDiv">
    <!-- @sort-change="dataSort" -->
    <el-table tooltip-effect="darkTable" :data="indicatorsList" class="nowrapTable showOnlyLine sortTable" border>
      <el-table-column
        v-for="(item, index) in showFieldList"
        :key="`${index}-${item.fieldName}`"
        min-width="200"
        sortable
        :label="item.fieldRemark"
        :prop="item.fieldName"
        show-overflow-tooltip
        :fixed="item.fieldRemark === $t('项目名称')"
      >
        <template slot="header">
          <span class="fieldName">
            <p :title="item.fieldRemark">{{ item.fieldRemark }} </p>
          </span>
          <fieldQuery ref="fieldQuery" :field-val="item" :group-hidden="false" @queryData="getQueryData" />
        </template>
        <template slot-scope="scope">
          <a
            v-if="item.linkType === 'XST'"
            class="link_a"
            @click="$emit('blankPath', item.linkAddress, scope.row)"
          >{{ scope.row[item.fieldName] }} </a>
          <a
            v-else-if="item.linkType === 'XYM'"
            class="link_a"
            @click="$emit('indicatorsDialog', item.linkAddress, scope.row)"
          >{{ scope.row[item.fieldName] }}</a>
          <div v-else class="cell" :style="(item.type === 'JE' || item.type === 'BL'? 'text-align:right': '')">
            {{ scope.row[item.fieldName] }}
          </div>
        </template>
      </el-table-column>
    </el-table>

    <el-row>
      <!--      <el-col :span="4" style="margin-top: 10px;">
        <el-button
          type="warning"
          icon="el-icon-download"
          size="mini"
          @click="exportIndicatorHandle"
        >{{ $t("导出") }}</el-button>
      </el-col>-->
      <el-col :span="20">
        <pagination
          v-show="total>0"
          class="dealPage"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getIndicatorsList()"
        />
      </el-col>
    </el-row>

  </div>
</template>

<script>
import { findIndicatorsDataList } from '@/api/system/home/view/homeMainView'
// import fieldQuery from '@/views/system/search/fieldQuery'
import { findDrillDownDataList } from '@/api/system/home/homeIndicatorsDrillDown'

export default {
  name: 'DrillDown',
  components: {
    // fieldQuery
  },
  data() {
    return {
      loadingTable: false,
      indicatorsOpen: [],
      indicatorsList: [],
      showFieldList: [],
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      searchQueryList: [],
      recordRowData: undefined,
      recordFieldId: undefined
    }
  },
  methods: {
    getIndicatorsList(fieldId, row) {
       this.loadingTable = true
      if (fieldId) {
        this.queryParams.fieldId = fieldId
        this.recordFieldId = fieldId
        this.$nextTick(() => {
          this.$refs.fieldQuery && this.$refs.fieldQuery.forEach(item => {
            item.visible = false
          })
        })
      } else {
         this.queryParams.fieldId = this.recordFieldId
      }
      if (row) {
           this.queryParams.rowData = row
           this.recordRowData = row
      } else {
          this.queryParams.rowData = this.recordRowData
      }
      findDrillDownDataList(this.queryParams).then(res => {
        this.showFieldList = res.datas.showFieldList
        this.indicatorsList = res.data.rows
        this.total = res.data.total
        // 表格闪动
        setTimeout(() => {
          this.loadingTable = false
        }, 10)
        this.$forceUpdate()
      })
    },
    // 字段查询
    getQueryData(data) {
      if (!(this.searchQueryList instanceof Array)) {
        this.$set(this, 'searchQueryList', [])
      }
      this.$nextTick(() => {
        var searchQueryTempList = []
        this.searchQueryList.forEach(item => {
          if (item.fieldName !== data.fieldName) {
            searchQueryTempList.push(item)
          }
        })
        this.searchQueryList = searchQueryTempList
        if (data.value !== '' || data.conditions !== '') {
          this.searchQueryList.push(data)
        }
        this.queryParams.searchQueryVoList = this.searchQueryList
        this.loadingTable = true
        this.indicatorsList = []
        findDrillDownDataList(this.queryParams).then(res => {
          this.indicatorsList = res.data.rows
          this.total = res.data.total
          this.loadingTable = false
        })
      })
    },
    // 排序
    dataSort(column) {
      this.loadingTable = true
      // this.queryParams.pageNum = 1
      // this.queryParams.pageSize = 10
      var searchOrderByVo = {}
      searchOrderByVo.prop = column.prop
      searchOrderByVo.order = column.order
      this.queryParams.searchOrderByVo = searchOrderByVo
      findIndicatorsDataList(this.queryParams).then(res => {
        this.indicatorsList = res.data.rows
        this.loadingTable = false
      })
    }
  }
}
</script>

<style scoped>

</style>
